<template>
    <label>
        <Button type="primary" @click="modal1 = true">{{label}}</Button>
        <Modal
            v-model="modal1"
            :title="title"
            @on-ok="ok"
            @on-cancel="cancel">
            <CheckboxGroup v-model="temp">
                <template v-for="item in items">
                    <div v-if="item.children">
                        <span>{{item.name}}</span>
                        <Checkbox v-for="item2 in item.children" :label="item2"></Checkbox>
                    </div>
                    <Checkbox v-if="!item.children" :label="item"></Checkbox>
                </template>
            </CheckboxGroup>
        </Modal>
    </label>
</template>
<script>
    export default {
        name: 'AlterMultSelector',
        props: {
            value: {
                type: Array
            },
            items: {
                type: Array
            },
            label: {
                type: String,
                default: "请选择"
            },
            title: {
                type: String,
                default: "请选择"
            }
        },
        data () {
            return {
                modal1: false,
                temp: []
            }
        },
        methods: {
            ok () {
                this.value.splice(0, this.value.length);
                this.value.push.apply(this.value, this.temp);
                //this.$Message.info('Clicked ok');
            },
            cancel () {
                //this.$Message.info('Clicked cancel');
            }
        },
        watch: {
            modal1(current, old) {
                if(current) {
                    this.temp = this.value.concat([]);
                }
            }
        }
    }
</script>
